<!--互联网医院模块-->
<template lang="">
    <div>
      <van-image
  width="100%"
  height="10rem"
  class="hbg"
  src="http://www.zlllcy.com/image/page-bg.jpg"
/>
  <van-nav-bar
  class="top"
  fixed
  title="互联网医院"
  left-text=""
  left-arrow
  @click-left="onClickLeft"
/>
<!-- 搜索框 -->
<van-search
  class="search"
  v-model="value"
  shape="round"
  background="transparent"
  placeholder="请输入搜索关键词"
/>

<!-- 分割线 -->
<van-divider
  :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
>
  推荐服务
</van-divider>
<!-- 推荐服务 -->
<van-grid :column-num="3">
  <van-grid-item v-for="(item,i) in data2" :key="i" :icon="item.img" :text="item.val" />
</van-grid>
<!-- 分割线 -->
<van-divider
  :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
>
  特色专科推荐
</van-divider>
<!-- 内容横排 -->
<van-grid direction="horizontal" :column-num="3" class="Hrow">
  <van-grid-item icon="http://www.zlllcy.com/image/icon-img/history/1.jpg" text="复旦大学附属皮肤医院" />
  <van-grid-item icon="http://www.zlllcy.com/image/icon-img/history/2.jpg" text="复旦大学附属中山医院" />
  <van-grid-item icon="http://www.zlllcy.com/image/icon-img/history/3.jpg" text="复旦大学附属眼鼻耳喉医院" />
  
</van-grid>
<!-- 底部 -->
<van-empty  description="没有更多了...">
  
</van-empty>
    </div>
</template>
<style scoped>
.hbg{
  background-color:aqua;
}
.top{
  background-color: transparent;
}
.top>>>i{color: white;}
.top>>>.van-nav-bar__title {
  color: white;
}
.van-hairline--bottom::after{
  border-bottom-width: 0px;
}
/* 搜索 */
.search{
  position: absolute;
  top:5vh;
  opacity: 0.9;
  width: 80%;
  margin-left: 40px;
  /* margin:0 auto; */
}
.Hrow{
  height: 60px;
  /* background-color: green; */
  border:0;
  overflow: hidden;
}
/* 底部 */
  .bottom-button {
    width: 160px;
    height: 40px;
  }
</style>
<script>
import { Dialog } from 'vant';
var data1 = [{val:'复诊配药',img:'http://www.zlllcy.com/image/icon-img/bg//bg1/1.png'},
{val:'专家咨询',img:'http://www.zlllcy.com/image/icon-img/bg//bg1/2.png'},
{val:'药品查询',img:'http://www.zlllcy.com/image/icon-img/bg//bg1/3.png'},
{val:'核算检测',img:'http://www.zlllcy.com/image/icon-img/bg//bg1/4.png'},
{val:'电子处方',img:'http://www.zlllcy.com/image/icon-img/bg//bg1/5.png'},
{val:'电子医保',img:'http://www.zlllcy.com/image/icon-img/bg//bg1/6.png'}]
export default {
  data() {
    return {
      value: "",
      data2:data1,
    };
  },

  methods: {
    onClickLeft() {
      history.go(-1);
    },
    
    
  },
};
</script>